<template>
	<view :show="show" class="page">
		
		<uni-section>
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear">
			</uni-search-bar>
		</uni-section>
		<view class="condition">
			<view>共 3 条</view>
			      <uni-data-select
			        v-model="value"
			        :localdata="range"
			        @change="change"
			        :clear="false" class="assembly"
			      ></uni-data-select>
		</view>
		<view class="order">
			<view class="num">
				<view class="number">订单号: 2021020831213</view>
				<view class="money">2000.00 元</view>
			</view>
			<view class="detail">
				<text>下单用户: 张三丰</text>   <image src="@/static/电话图标.png" mode=""></image> <br/>
				<text>预约时间: 2022-10-10 11:00</text><br/>
				<text>服务项目: 宝马X5加装轮毂、情节车辆、汽车美容</text>
			</view>
			<view class="check">
				<view class="time">
					下单时间: 2022-10-10 11:09
				</view>
				<button type="default" size="mini" @click="goto();handle(['fade', 'zoom-in']);" >查看详情</button>
			</view>
		</view>
		<view class="order">
			<view class="num">
				<view class="number">订单号: 2021020831213</view>
				<view class="money">2000.00 元</view>
			</view>
			<view class="detail">
				<text>下单用户: 张三丰</text>   <image src="@/static/电话图标.png" mode=""></image> <br/>
				<text>预约时间: 2022-10-10 11:00</text><br/>
				<text>服务项目: 宝马X5加装轮毂、情节车辆、汽车美容</text>
			</view>
			<view class="check">
				<view class="time">
					下单时间: 2022-10-10 11:09
				</view>
				<button type="default" size="mini" @click="goto();handle(['fade', 'zoom-in']);" >查看详情</button>
			</view>
		</view>
		<view class="order">
			<view class="num">
				<view class="number">订单号: 2021020831213</view>
				<view class="money">2000.00 元</view>
			</view>
			<view class="detail">
				<text>下单用户: 张三丰</text>   <image src="@/static/电话图标.png" mode=""></image> <br/>
				<text>预约时间: 2022-10-10 11:00</text><br/>
				<text>服务项目: 宝马X5加装轮毂、情节车辆、汽车美容</text>
			</view>
			<view class="check">
				<view class="time">
					下单时间: 2022-10-10 11:09
				</view>
				<button type="default" size="mini" @click="goto();handle(['fade', 'zoom-in']);" >查看详情</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				   value: 0,
				        range: [
				          { value: 0, text: "待服务" },
				          { value: 1, text: "已完成" },
				        ],
					show:true,
					modeClass: 'fade',
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
		  change(e) {
			console.log("e:", e);
		  },
		  goto(){
			  uni.navigateTo({
			  	url:"/pages/orderManadement-details/orderManadement-details"
			  })
		  },
		  handle(type) {
		  	this.show = !this.show
		  	this.modeClass = type
		  },
		}
	}
</script>

<style scoped>
	.page{
		background-color: white;
	}
.condition{
	background-color: white;
	display: flex;
}
.assembly{
	width: 10rpx;
}
uni-data-select{
	border: none;
}
.condition > view:nth-child(1){
	font-size: 28rpx;
	font-weight: bolder;
	margin-left: 20rpx;
	margin-bottom: 50rpx;
}
  ::v-deep .uni-select{  
        height: 50rpx;  
		width: 150rpx;
		border: none;
		left: 480rpx;
		top: -25rpx;
		font-size: 28rpx;
    } 
.order{
	box-shadow: -5rpx  0rpx 5rpx -5rpx #557AD6;
	margin-bottom: 10rpx;
}
.num{
	display: flex;
	justify-content: space-between;
}
.number{
	font-size: 32rpx;
	font-weight: bolder;
	margin-bottom: 20rpx;
}
.money{
	color: red;
	font-weight: bolder;
}
.detail{
		border-top: 3rpx solid #EFEFF5;
		border-bottom: 3rpx solid #EFEFF5;
}
.detail > text{
	height: 80rpx;
	line-height: 55rpx;
	
}
image{
	width: 40rpx;
	height: 40rpx;
	margin-left: 100rpx;
}
.order{
	background-color: white;
	padding: 14rpx 28rpx 0 28rpx;
	font-size: 28rpx;
	font-weight: bolder;
}
.check{
	display: flex;
	justify-content: space-between;
}
.time{
	font-size: 24rpx;
	color: rgba(154,154,154,1);
	margin-top: 20rpx;
}
button{
	height: 48rpx;
	line-height: 48rpx;
	width: 230rpx;
	right: -90rpx;
	background-color: #557AD6;
	color: white;
}
</style>
